$height-toolbar: 56px;
$height-footer: 32px;
$minWidth-layout:1024px;

@media screen and (max-width: 900px){
  .zhongzhao{
    --minWidth-boxFooter:10px;
  }
}

@media screen and (min-width: 900px) and (max-width: 1200px){
  .zhongzhao{
    --minWidth-boxFooter:20px;
  }
}

@media screen and (min-width: 1200px){
  .zhongzhao{
    // --padding_box-footer: 48px;
    --minWidth-boxFooter:48px;
  }
}

@media screen and (max-width: 680px){
  .box-toolbar{
    margin-top:-3px;
    .unit-item{
      height:36px;
      &:hover{
        .txt{
          position: absolute;
          top: calc( 100% + 20px);
          display: block;
          z-index: 20;
          background: #333;
          color: #fff !important;
          padding: 7px 11px;
          border-radius: 2px;
          word-break: keep-all;
          font-size: 12px !important;
          &:before{
            content: "";
            position: absolute;
            width: 15px;
            height: 10px;
            left: 10px;
            top: -7px;
            background: #333;
            clip-path: polygon(10% 1%, 0% 100%, 49% 100%);
          }
        }
      }
    }
    .txt{
      display: none;
    }
    .box-trigger{
      img{
        height:22px !important;
      }
    }
  }
}


*{
  list-style: none;
}

html{
  scroll-behavior: smooth;;
}

.zhongzhao{
  min-width: $minWidth-layout;
  --body-bg-color:#e5e6e4;
  &.no-active{
    cursor: progress;
    *{
      cursor: progress;
    }
    [can-click-trigger],[can-click],.signature-annotation,.box-confirm-seal{  
      pointer-events: none !important;
    }
    .page{
      a{
        pointer-events: none;;
      }
    }
    .box-footer{
      pointer-events: none;;
    }
  }
  #toolbarViewer{
    height:$height-toolbar;
    padding:14px 12px 8px 12px;
    box-sizing: border-box;
    background: #F0F1EE;
    border-bottom:solid 1px #D7D7DC;
  }
  .box-toolbar{
    height:$height-toolbar;
    min-width:530px;
    @apply z-[900] fixed;

    .unit-item{
      @apply relative;
      .float-tips{
        @apply absolute px-2 bottom-[-36px] left-0 bg-[#333] text-[14px] leading-[26px];
        width: max-content;;
        transform: translateX( calc( -50% + 28px ) );
        border-radius: 4px;
        // box-shadow: 3px 3px 9px 0px #00000014;
        color:#fff;
        // background:pink;
        &:before{
          content: "";
          position: absolute;
          width: 15px;
          height: 10px;
          left: 52%;
          transform: translateX( -50% ) ;
          top: -7px;
          background: #333;
          clip-path: polygon(10% 1%, 0% 100%, 49% 100%);
        }
      }
    }
  }
  .box-footer{
    box-shadow:0 -1px 0 0 #D7D7DC;
    --bg-color:#f0f1ee;
    @apply px-[var(--minWidth-boxFooter)]  min-w-[800px] fixed inset-0 top-auto bg-[var(--bg-color)] flex items-center z-[200] text-[14px] box-border;
    
    height:$height-footer;
    .box-pages{
      .item-pages {
        @apply w-5 h-5;
      }
      img{
        @apply w-4 h-4;
      }
    }
    .toolbarLabel{
      font-size: 13px;
    }
    input,select{
      height:24px;
      line-height: 24px;
      padding-top: 0;
      padding-bottom: 0;
      box-sizing: border-box;
      margin:0;
      text-align: center;
      font-size:13px;
      background: var(--bg-color);
      &:focus{
        background: #fff;
      }
    }
  }

  #scaleSelectContainer{
    min-width: auto;
    select{
      padding-right:24px;
    }
  }

  #mainContainer{
    --rightContainer-width:0;
  }

  #rightContainer{
    width:var(--rightContainer-width);
    transition:width .2s ease;
    background: #EEEFED;
    inset: $height-toolbar 0 $height-footer auto;
    border-left:solid 1px #D7D7DC;
    @apply absolute right-0 ;
  }
  
  #viewerContainer{
    inset: $height-toolbar 0 $height-footer 0;
    inset-inline-end: var(--rightContainer-width);
  }

  #loadingBar{
    top:$height-toolbar;
  }
  .box-btn{
    >div{
      &:not(:first-child){
        margin-left:18px;
      }
    }
    .item-btn{
      // padding:4px 8px;
      border:none;
      background: none;
      cursor: pointer;
      text-align: center;
      img{
        @apply h-[16px] mx-auto block;
      }
      .txt{
        color: #64666b;
        margin-top: 2px;
        font-size: 13px;
        line-height: 1;
      }
    }
  }
  .box-pages{
    .item-pages {
      @apply w-5 h-5;
    }
    img{
      @apply w-4 h-4;
    }
  }
  
  .findbar{
    background: #F0F1EE;;
    position: fixed;
    top:calc($height-toolbar + 4px);
    width:310px;
    padding:4px 0 4px 8px;
    display: flex;
    left:auto;
    right:20px;
    box-shadow:0 0 5px;
    #findInput{
      border-left: none;
      border-top:none;
      border-right: none;
      border-radius: 0;
      font-size: 14px;
    }
    &::before, &:after{
      display: none;
    }
    .splitToolbarButtonSeparator{
      height:20px;
    }
    .toolbarButton{
      @apply cursor-pointer;
    }
    #findbarInputContainer{
      margin-right:0px;
    }
    .splitToolbarButton{
      margin-left:4px;
      margin-right:0px;
    }
  }
  
  #thumbnailView{
    @apply flex flex-col items-center p-0 w-full;
    a{
      @apply block;
    }
  }
  
  #attachmentsView,#outlineView{
    padding-top:10px;
  }

  #outlineView{
    .treeItem{
      a{
        @apply text-[13px] leading-[1.4] py-[3px] text-[#64666b];
        &:hover{
          background:#D6D6D6ff;
        }
      }
      &.selected{
        a {
          background:#D6D6D6;
        }
      }
    }
  }
  
  #sidebarContainer{
    --sidebar-width:200px;
    // box-shadow: 0px 2px 16px 0px rgba(81,83,91,0.2);
    inset-block-start: $height-toolbar;
    inset-block-end: $height-footer;
    border-top:none;
    border-right: solid 1px #D7D7DC;
  }
  
  #sidebarContent{
    background-color: #EEEFED;
    inset-block-start:0;
    box-shadow:none;
    
    // opacity:0.1
    >div{
      inset-block-start:14px;
      inset-block-end:16px;
    }
  }

  .box-noData{
    @apply text-center flex justify-center items-center h-full w-full;
    img{
      @apply block mx-auto h-[105px];
    }
    .text{
      @apply text-[14px] text-[#BFC1C5] mt-[20px] leading-[22px];
    }
  }
  
  .thumbnail{
    height:auto;
    border-width: 0px;
    margin-bottom:0px;
    padding:16px;
    padding-bottom:2px;
    border-radius: 4px;
    transition:background .2s linear;
    img{
      box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
      border-radius: 4px;
    }
    
    &.selected {
      background: #D6D6D6;
    }
    .pageNumber{
      @apply text-center text-light text-xs;
    }
  }

  .signature-annotation{
    @apply cursor-pointer;
    --highlight-bg-color:rgba(22, 93, 255, 0.4);
    &:hover{
      &:after{
        content:"";
        @apply absolute inset-0;
        background: rgba(22,93,255,.2) !important;
      }
      // outline:dashed 2px #3461ff;
      outline:dashed 2px #969AA0;
    }
    &[data-valid-result="notpass"]{
      &:after{
        content:"";
        @apply absolute inset-0;
        background: rgba(255, 68, 68, 0.20);
      }
    }
    &.signature-active{
      outline:dashed 2px #969AA0;
    }
  }
}

#viewer{
  &.disabledSignatureDetail{
    .signature-annotation{
      @apply pointer-events-none;
    }
  }
}

#boxBtnSealAddContinued{
  #tipsSealAddContinued{
    display: none;
  }
  &:hover{
    #tipsSealAddContinued{
      display: block !important;
    }
  }
}

#scaleSelect{
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
  font-size:13px !important;
  &:focus-visible{
    border:solid 1px #0a84ff;
    outline:none;
  }
}